<template id="welcome">
  <!-- welcome-top,wellcome-top-left-top,wellcome-top-right-top,wellcome-top-right-bottom,welcome-bottom -->
  <div class="welcome">
    <!-- 上面 -->
    <section class="welcome-top">
      <!-- 上面的左边 -->
      <div class="wellcome-top-left">
        <div class="wellcome-top-left-top">
          <div class="wellcome-top-left-top-left">
            <el-avatar :size="50" :src="circleUrl"></el-avatar>
          </div>
          <div class="wellcome-top-left-top-right">
            <p class="nickname">{{ userInfo.nickname }}</p>
            <p class="nick">web高级开发工程师</p>
          </div>
        </div>
        <div class="wellcome-top-left-bottom">
          <el-calendar v-model="value" class="time"></el-calendar>
        </div>
      </div>
      <!-- 上面的右边 -->
      <div class="wellcome-top-right">
        <div class="wellcome-top-right-top">
          <div class="wellcome-top-right-top-left">
            <p>南京</p>
            <p>{{ date }} {{ week }}</p>
            <p class="weacher">
              <i class="iconfont icon-yu"></i>
            </p>
          </div>
          <div class="wellcome-top-right-top-right">
            <p>通知公告</p>
          </div>
        </div>
        <div class="wellcome-top-right-bottom">
          <div class="wellcome-top-right-bottom-left">
            <div class="container1" ref="container1"></div>
          </div>
          <div class="wellcome-top-right-bottom-right">
            <div class="performance">
              <h3>本月工作进度完成情况</h3>
              <div>
                <ul class="lis">
                  <li v-for="v in lis" :key="v.name">{{ v.value }}</li>
                </ul>
                <ul class="lis">
                  <li v-for="k in lis" :key="k.name">{{ k.name }}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 下面 -->
    <section class="welcome-bottom">
      <div class="welcome-bottom-left">
        <div class="container2" ref="container2"></div>
      </div>
      <div class="welcome-bottom-right">
        <div class="container3" ref="container3"></div>
      </div>
    </section>
  </div>
</template>

<script>
import { taskDataApi, LineDataApi, expectDataApi, weatherApi } from "../api";
import * as echarts from "echarts";
import { mapState } from "vuex";
export default {
  data() {
    return {
      lis: [],
      value: new Date(),
      date: "2021-1-20",
      wea: "yu",
      week: "星期二",
    };
  },
  created() {
   
  },

  mounted() {
    /* 饼状图 */
     weatherApi().then((res) => {
      let data = res.data.data[0];
      this.wea = data.wea_img;
    });

    this.$nextTick(() => {
      let myCharts3 = echarts.init(this.$refs.container3);

      let option = {
        color: ["#0066CC", "#FF0099", "#FF3333"],
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "right",
          top: "bottom",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "60%",
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
          },
        ],
      };

      expectDataApi().then((res) => {
        let data = res.data.data;
        let sData = data.map((item) => {
          return {
            value: item.rate,
            name: item.title,
          };
        });
        option.series[0].data = sData;
        myCharts3.setOption(option);
      });
    });
    /* 折线图 */
    this.$nextTick(() => {
      let myChart2 = echarts.init(this.$refs.container2);
      let option = {
        center: ["50%", "50%"],
        xAxis: {
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          show: false,
        },
        yAxis: {
          type: "value",
          show: false,
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
          },
        ],
      };
      LineDataApi().then((res) => {
        let name = JSON.parse(JSON.stringify(res.data.data));
        let rate = JSON.parse(JSON.stringify(res.data.data));

        rate.forEach((item) => {
          return delete item.name;
        });
        name.forEach((item) => {
          return delete item.rate;
        });
        option.series[0].data = [];
        rate.forEach((item) => {
          option.series[0].data.push(item.rate);
        });
        option.xAxis.data = [];
        name.forEach((item) => {
          option.xAxis.data.push(item.name);
        });
        /*  console.log(option.xAxis.data); */
        myChart2.setOption(option);
      });
    });
    /* 环状图 */
    this.$nextTick(() => {
      let myChart1 = echarts.init(this.$refs.container1);
      let option = {
        title: {
          text: "任务进度:",

          left: "left",
        },

        /*  color:[red,], */
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "right",
          top: "bottom",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "center",
              formatter: "{d}%",
            },
            center: ["40%", "50%"],
            radius: ["40%", "70%"],
            data: [
              { value: 1048, name: "搜索引擎" },
              { value: 735, name: "直接访问" },
              { value: 580, name: "邮件营销" },
              { value: 484, name: "联盟广告" },
              { value: 300, name: "视频广告" },
            ],
            emphasis: {
              label: {
                show: true,
                fontSize: "15",
                fontWeight: "bold",
              },
            },
          },
        ],
      };
      taskDataApi().then((res) => {
        /*  console.log(res); */
        let data = res.data.data;
        option.series[0].data = data;
        this.lis = data;
        /*  console.log(this.lis); */
        myChart1.setOption(option);
      });
    });
  },
  computed: {
    ...mapState(["userInfo"]),
    circleUrl() {
      return this.userInfo.headimgurl
        ? this.userInfo.headimgurl
        : "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
    },
  },
};
</script>
<style lang="less" scoped>
&/deep/.iconfont {
  font-size: 30px !important;
}
&/deep/.el-calendar__header {
  padding: 0 !important;
}
&/deep/.el-calendar__body {
  padding: 0;
}
&/deep/.el-calendar-table thead th {
  padding: 0;
}
&/deep/.el-calendar-day {
  padding: 0;
  height: 21px;
}
&/deep/.el-avatar {
  width: 75px !important;
  height: 75px !important;
}
&/deep/.el-calendar {
  background: #ff99ff;
}
.time {
  width: 100%;
  height: 100%;
}
.performance {
  margin-top: 40px;
}
h3 {
  text-align: center;
}
.lis {
  margin-top: 25px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
/* 第一个环状图 */
.container1 {
  width: 100%;
  height: 100%;
}
.container2 {
  width: 100%;
  height: 100%;
}
.container3 {
  width: 100%;
  height: 100%;
}
.welcome {
  width: 100%;
  height: 100%;
  background: #cc3399;
}
.welcome-top {
  margin-top: 10px;
  height: 65%;
  width: 100%;
}
.welcome-bottom {
  background: #ff99ff;

  height: 35%;
  width: 100%;
}
.welcome-top,
.wellcome-top-left-top,
.wellcome-top-right-top,
.wellcome-top-right-bottom,
.welcome-bottom {
  display: flex;
}
.wellcome-top-left {
  width: 35%;
}
.wellcome-top-right {
  width: 65%;
}
.wellcome-top-left-top {
  justify-content: space-between;
  background: #ff99ff;
  margin: 5px;
}
.wellcome-top-left-top {
  height: 40%;
}
.wellcome-top-left-bottom {
  padding: 10px;
  height: 60%;
  background: #ff99ff;
  margin: 5px;
}
.wellcome-top-left-top-right,
.wellcome-top-left-top-left {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  p {
    margin: 10px 0;
  }
}
.wellcome-top-right-top-left {
  background: #ff99ff;

  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wellcome-top-right-top-right {
  background: #ff99ff;
  margin: 5px;
  margin-bottom: 0;
  width: 60%;
  text-align: center;
}
.wellcome-top-right-top {
  height: 50%;
}
.wellcome-top-right-bottom {
  height: 50%;
  background: #ff99ff;
  margin: 5px;
  margin-left: 0;
}
.wellcome-top-right-bottom-left,
.wellcome-top-right-bottom-right,
.welcome-bottom-left,
.welcome-bottom-right {
  width: 50%;
}
.welcome-bottom-left,
.welcome-bottom-right {
  border-top: 5px #cc3399 solid;
}
</style>